<link rel="stylesheet" href="../style/left-menu.css">
<div class="menu-content">
  <ul class="menu-list">
    <!-- <li class="menu-item">
      <a href="#">家用电器</a>
    </li>
    <li class="menu-item active-item">
      <a href="#">手机</a> /
      <a href="#">运营商</a> /
      <a href="#">数码</a>
    </li> -->
  </ul>
  <div class="detail-content">
    <div class="detail-channel">
      <!-- <a href="#">玩3C <i class="iconfont icon-right"></i></a>
      <a href="#">玩3C <i class="iconfont icon-right"></i></a>
      <a href="#">玩3C <i class="iconfont icon-right"></i></a> -->
    </div>
    <div class="detail-list">
      <!-- <div class="d-content">
        <div class="d-title">
          <a href="#">
            电视
            <i class="iconfont icon-right"></i>
          </a>
        </div>
        <div class="d-con">
          <a href="#">液晶电视</a>
          <a href="#">液晶电视</a>
        </div>
      </div>
      <div class="d-content">
        <div class="d-title">
          <a href="#">
            电视
            <i class="iconfont icon-right"></i>
          </a>
        </div>
        <div class="d-con">
          <a href="#">液晶电视</a>
          <a href="#">液晶电视</a>
        </div>
      </div> -->
    </div>
  </div>
</div>

<script>
  $.ajax({
    url: '/menu',
    type: 'get',
    dataType: 'json',
    success: function (res) {
      renderHTML(res.data);
    }
  });

  function renderHTML(data) {
    data.forEach(function (obj) {
      // console.log(obj.titles);
      var li = $('<li class="menu-item"/>');
      obj.titles.forEach(function (item, index) {
        $('<a/>').attr('href', item.link).html(item.value).appendTo(li);
        if (index < obj.titles.length -1) {
          li.append(' / ');
        }
      });
      $('.menu-list').append(li);
    });
    // 绑定事件
    $('.menu-list').on('mouseenter', 'li', function () {
      $('.menu-list').find('li').removeClass('active-item');
      $('.detail-channel').html('');
      $('.detail-list').html('');
      $(this).addClass('active-item');
      $('.detail-content').show();
      renderDetail(data[$(this).index()]);
      console.log(typeof data);
    });
    $('.menu-content').on('mouseleave', function () {
      $('.menu-list').find('li').removeClass('active-item');
      $('.detail-content').hide();
    })  
  }

  function renderDetail(data) {
    var channel = data.channel;
    var content = data.content;
    channel.forEach(function (item) {
      $('<a/>').attr('href', item.link)
        .append(item.value)
        .append($('<i class="iconfont icon-right" />'))
        .appendTo($('.detail-channel'));
    });
    content.forEach(function (item) {
      var dContent = $('<div class="d-content"/>');
      var dTitle = $(' <div class="d-title"/>').append( 
        $('<a/>').attr('href', item.link)
        .append(item.value));
      var dCont = $('<div class="d-con"/>');
      item.detail.forEach(function (i) {
        $('<a/>').attr('href', i.link).append(i.value).appendTo(dCont);
      });
      dContent.append(dTitle).append(dCont).appendTo($('.detail-list'));
    });

  }
</script>